<template>
  <div class="container">
    <Breadcrumb :items="['menu.articleManage', 'menu.articleDetail']" />
    <a-card class="custom-card" title="">
      <DetailForm
        ref="detailFormRef"
        :categoryDatas="categoryDatas"
        @saveCallback="fetchData"
      />
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';

  import { apiCateList } from '@/api/article';
  import DetailForm from './components/form.vue';

  const router = useRouter();

  const categoryDatas = ref<any>([]); // 分类
  const detailFormRef = ref();

  const fetchData = async () => {
    const routeParams = router.currentRoute.value.params;
    if (routeParams) {
      // detailFormRef 刚进来时为 undefined
      setTimeout(() => {
        detailFormRef.value.fetchData({id: routeParams.id});
      }, 1000);
    }
  };

  const getCategory = async () => {
    const { data } = await apiCateList();
    categoryDatas.value = data.data;
  };

  getCategory();
  fetchData();
</script>

<script lang="ts">
  export default {
    name: 'ArticleDetail',
  };
</script>

<style scoped lang="less">

</style>
